<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px" style="margin-bottom: 0;">
      <el-row class="mb5">
        <el-radio-group v-model="xzTabVal" @change="xzTabChange"  size="small" style="margin-right: 30px">
          <el-radio-button v-for="tab in xzTabs" :label="tab.label">
            <el-badge :value="tab.badge" class="item">
              {{ tab.name }}
            </el-badge>
          </el-radio-button>
        </el-radio-group>
        <el-radio-group v-model="queryParams.storeId" size="small">
            <el-radio-button label="">全部</el-radio-button>
            <el-radio-button v-for="dict in storeOptions" :label="dict.id">
              {{dict.label}}
            </el-radio-button>
          </el-radio-group>
          <el-radio-group v-model="queryParams.areaId" class="ml10" size="small">
            <el-radio-button label="">全部</el-radio-button>
            <el-radio-button v-for="dict in storeAreaOptions" :label="dict.id">
              {{dict.name}}
            </el-radio-button>
          </el-radio-group>
      </el-row>
      <el-row class="mb5">
          <el-radio-group v-model="queryParams.region" @change="radioChange" size="small">
            <el-radio-button label="">全部</el-radio-button>
            <el-radio-button v-for="tab in dict.type.wms_put_task_area" :label="tab.value" v-if="tab.value != 'QB'">
              {{tab.label}}
            </el-radio-button>
          </el-radio-group>
          <el-form-item class="ml10">
            <el-date-picker v-model="daterangeIntime" size="small" style="width: 240px" value-format="yyyy-MM-dd"
              type="daterange" range-separator="-" start-placeholder="起始日期" end-placeholder="截止日期"></el-date-picker>
          </el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-row>
    </el-form>

    <el-card class="box-card mb10" shadow="hover">
      <div slot="header" class="clearfix">
        <span>仓库报表</span>
        <!-- <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" class="fr">导出</el-button> -->
      </div>
      <el-row :gutter="15">
        <el-col :span="16">
          <el-table v-loading="loading" :data="storeReports" show-summary :summary-method="getSummaries"  border stripe>
            <el-table-column label="仓库" prop="storeName"/>
            <el-table-column label="地域" prop="region">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.wms_put_task_area" :value="scope.row.region" />
              </template>
            </el-table-column>
            <el-table-column label="接收数" align="center" prop="receives">
              <template slot-scope="scope">
                <el-tag type="success" plain size="small" v-if="scope.row.receives > 0">{{scope.row.receives}}</el-tag>
                <el-badge type="info" class="item" is-dot v-else></el-badge>
              </template>
            </el-table-column>
            <el-table-column label="待上架" align="center" prop="unputs">
              <template slot-scope="scope">
                <el-tag type="warning" plain size="small" v-if="scope.row.unputs > 0">{{scope.row.unputs}}</el-tag>
                <el-badge type="info" class="item" is-dot v-else></el-badge>
              </template>
            </el-table-column>
            <el-table-column label="已入库" align="center" prop="innums">
              <template slot-scope="scope">
                <el-tag type="primary" plain size="small" v-if="scope.row.innums > 0">{{scope.row.innums}}</el-tag>
                <el-badge type="info" class="item" is-dot v-else></el-badge>
              </template>
            </el-table-column>
            <el-table-column label="出库" align="center" prop="outnums">
              <template slot-scope="scope">
                <el-tag type="warning" plain size="small" v-if="scope.row.outnums > 0">{{scope.row.outnums}}</el-tag>
                <el-badge type="info" class="item" is-dot v-else></el-badge>
              </template>
            </el-table-column>
            <el-table-column label="取证出库" align="center" prop="eoutnums">
              <template slot-scope="scope">
                <el-tag type="warning" plain size="small" v-if="scope.row.eoutnums > 0">{{scope.row.eoutnums}}</el-tag>
                <el-badge type="info" class="item" is-dot v-else></el-badge>
              </template>
            </el-table-column>
            <el-table-column label="处置" align="center" prop="deals">
              <template slot-scope="scope">
                <el-tag type="danger" plain size="small" v-if="scope.row.deals > 0">{{scope.row.deals}}</el-tag>
                <el-badge type="info" class="item" is-dot v-else></el-badge>
              </template>
            </el-table-column>
            <el-table-column label="调用" align="center" prop="tnums">
              <template slot-scope="scope">
                <el-tag type="warning" plain size="small" v-if="scope.row.tnums > 0">{{scope.row.tnums}}</el-tag>
                <el-badge type="info" class="item" is-dot v-else></el-badge>
              </template>
            </el-table-column>
            <el-table-column label="取证调用" align="center" prop="etnums">
              <template slot-scope="scope">
                <el-tag type="warning" plain size="small" v-if="scope.row.etnums > 0">{{scope.row.etnums}}</el-tag>
                <el-badge type="info" class="item" is-dot v-else></el-badge>
              </template>
            </el-table-column>
             <el-table-column label="归还" align="center" prop="rnums">
              <template slot-scope="scope">
                <el-tag type="success" plain size="small" v-if="scope.row.rnums > 0">{{scope.row.rnums}}</el-tag>
                <el-badge type="info" class="item" is-dot v-else></el-badge>
              </template>
            </el-table-column>
            <el-table-column label="库存" align="center" prop="nums">
              <template slot-scope="scope">
                <el-tag type="primary" plain size="small" v-if="scope.row.nums > 0">{{scope.row.nums}}</el-tag>
                <el-badge type="info" class="item" is-dot v-else></el-badge>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="8">
          <Echarts :option="option" style="height: 350px;" />
        </el-col>
      </el-row>

    </el-card>

    <el-card class="box-card mb10" shadow="hover">
      <div slot="header" class="clearfix">
        <span>库区报表</span>
        <!-- <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" class="fr">导出</el-button> -->
      </div>
      <el-row :gutter="15">
        <el-col :span="16">
          <el-table v-loading="loading" :data="areaReports" show-summary :summary-method="getSummaries1"  border stripe>
            <el-table-column label="库区" prop="areaName"/>
            <el-table-column label="地域" prop="region">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.wms_put_task_area" :value="scope.row.region" />
              </template>
            </el-table-column>
            <el-table-column label="入库" align="center" prop="innums">
              <template slot-scope="scope">
                <el-tag type="primary" plain size="small" v-if="scope.row.innums > 0">{{scope.row.innums}}</el-tag>
                <el-badge type="info" class="item" is-dot v-else></el-badge>
              </template>
            </el-table-column>
            <el-table-column label="出库" align="center" prop="outnums">
              <template slot-scope="scope">
                <el-tag type="warning" plain size="small" v-if="scope.row.outnums > 0">{{scope.row.outnums}}</el-tag>
                <el-badge type="info" class="item" is-dot v-else></el-badge>
              </template>
            </el-table-column>
            <el-table-column label="取证出库" align="center" prop="eoutnums">
              <template slot-scope="scope">
                <el-tag type="warning" plain size="small" v-if="scope.row.eoutnums > 0">{{scope.row.eoutnums}}</el-tag>
                <el-badge type="info" class="item" is-dot v-else></el-badge>
              </template>
            </el-table-column>
            <el-table-column label="处置" align="center" prop="deals">
              <template slot-scope="scope">
                <el-tag type="danger" plain size="small" v-if="scope.row.deals > 0">{{scope.row.deals}}</el-tag>
                <el-badge type="info" class="item" is-dot v-else></el-badge>
              </template>
            </el-table-column>
            <el-table-column label="调用" align="center" prop="tnums">
              <template slot-scope="scope">
                <el-tag type="warning" plain size="small" v-if="scope.row.tnums > 0">{{scope.row.tnums}}</el-tag>
                <el-badge type="info" class="item" is-dot v-else></el-badge>
              </template>
            </el-table-column>
            <el-table-column label="取证调用" align="center" prop="etnums">
              <template slot-scope="scope">
                <el-tag type="warning" plain size="small" v-if="scope.row.etnums > 0">{{scope.row.etnums}}</el-tag>
                <el-badge type="info" class="item" is-dot v-else></el-badge>
              </template>
            </el-table-column>
             <el-table-column label="归还" align="center" prop="rnums">
              <template slot-scope="scope">
                <el-tag type="success" plain size="small" v-if="scope.row.rnums > 0">{{scope.row.rnums}}</el-tag>
                <el-badge type="info" class="item" is-dot v-else></el-badge>
              </template>
            </el-table-column>
            <el-table-column label="库存" align="center" prop="nums">
              <template slot-scope="scope">
                <el-tag type="primary" plain size="small" v-if="scope.row.nums > 0">{{scope.row.nums}}</el-tag>
                <el-badge type="info" class="item" is-dot v-else></el-badge>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="8">
          <Echarts :option="option2" style="height: 350px;" />
        </el-col>
      </el-row>

    </el-card>

    <el-card class="box-card mb10" shadow="hover" v-if="carTypeReports && carTypeReports.length > 0">
      <div slot="header" class="clearfix">
        <span>车辆统计</span>
        <!-- <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" class="fr">导出</el-button> -->
      </div>
      <el-row :gutter="15">
        <el-col :span="24">
          <el-table v-loading="loading" :data="carTypeReports" show-summary :summary-method="getSummaries3"  border stripe>
            <el-table-column label="地域" prop="region">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.wms_put_task_area" :value="scope.row.region" />
              </template>
            </el-table-column>
            <el-table-column label="车辆类型" prop="cno">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.cno == 'X'">小汽车</el-tag>
                <el-tag v-if="scope.row.cno == 'H'" type="warning">货车</el-tag>
                <el-tag v-if="scope.row.cno == 'M'" type="success">摩托车</el-tag>
                <el-tag v-if="scope.row.cno == 'Z'" type="danger">自行车</el-tag>
                <el-tag v-if="scope.row.cno == 'Q'" type="info">其他</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="入库" align="center" prop="innums">
              <template slot-scope="scope">
                <el-tag type="primary" plain size="small" v-if="scope.row.innums > 0">{{scope.row.innums}}</el-tag>
                <el-badge type="info" class="item" is-dot v-else></el-badge>
              </template>
            </el-table-column>
            <el-table-column label="出库" align="center" prop="outnums">
              <template slot-scope="scope">
                <el-tag type="warning" plain size="small" v-if="scope.row.outnums > 0">{{scope.row.outnums}}</el-tag>
                <el-badge type="info" class="item" is-dot v-else></el-badge>
              </template>
            </el-table-column>
            <el-table-column label="取证出库" align="center" prop="eoutnums">
              <template slot-scope="scope">
                <el-tag type="warning" plain size="small" v-if="scope.row.eoutnums > 0">{{scope.row.eoutnums}}</el-tag>
                <el-badge type="info" class="item" is-dot v-else></el-badge>
              </template>
            </el-table-column>
            <el-table-column label="处置" align="center" prop="deals">
              <template slot-scope="scope">
                <el-tag type="danger" plain size="small" v-if="scope.row.deals > 0">{{scope.row.deals}}</el-tag>
                <el-badge type="info" class="item" is-dot v-else></el-badge>
              </template>
            </el-table-column>
            <el-table-column label="调用" align="center" prop="tnums">
              <template slot-scope="scope">
                <el-tag type="warning" plain size="small" v-if="scope.row.tnums > 0">{{scope.row.tnums}}</el-tag>
                <el-badge type="info" class="item" is-dot v-else></el-badge>
              </template>
            </el-table-column>
            <el-table-column label="取证调用" align="center" prop="etnums">
              <template slot-scope="scope">
                <el-tag type="warning" plain size="small" v-if="scope.row.etnums > 0">{{scope.row.etnums}}</el-tag>
                <el-badge type="info" class="item" is-dot v-else></el-badge>
              </template>
            </el-table-column>
            <el-table-column label="归还" align="center" prop="rnums">
              <template slot-scope="scope">
                <el-tag type="success" plain size="small" v-if="scope.row.rnums > 0">{{scope.row.rnums}}</el-tag>
                <el-badge type="info" class="item" is-dot v-else></el-badge>
              </template>
            </el-table-column>
            <el-table-column label="库存" align="center" prop="nums">
              <template slot-scope="scope">
                <el-tag type="primary" plain size="small" v-if="scope.row.nums > 0">{{scope.row.nums}}</el-tag>
                <el-badge type="info" class="item" is-dot v-else></el-badge>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

    </el-card>

    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span>地区报表</span>
        <!-- <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" class="fr">导出</el-button> -->
      </div>
      <el-row :gutter="15">
        <el-col :span="16">
          <el-table v-loading="loading" :data="regionReports" show-summary :summary-method="getSummaries2"  border stripe>
            <el-table-column label="地域" prop="region">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.wms_put_task_area" :value="scope.row.region" />
              </template>
            </el-table-column>
            <el-table-column label="入库" align="center" prop="innums">
              <template slot-scope="scope">
                <el-tag type="primary" plain size="small" v-if="scope.row.innums > 0">{{scope.row.innums}}</el-tag>
                <el-badge type="info" class="item" is-dot v-else></el-badge>
              </template>
            </el-table-column>
            <el-table-column label="出库" align="center" prop="outnums">
              <template slot-scope="scope">
                <el-tag type="warning" plain size="small" v-if="scope.row.outnums > 0">{{scope.row.outnums}}</el-tag>
                <el-badge type="info" class="item" is-dot v-else></el-badge>
              </template>
            </el-table-column>
            <el-table-column label="取证出库" align="center" prop="eoutnums">
              <template slot-scope="scope">
                <el-tag type="warning" plain size="small" v-if="scope.row.eoutnums > 0">{{scope.row.eoutnums}}</el-tag>
                <el-badge type="info" class="item" is-dot v-else></el-badge>
              </template>
            </el-table-column>
            <el-table-column label="处置" align="center" prop="deals">
              <template slot-scope="scope">
                <el-tag type="danger" plain size="small" v-if="scope.row.deals > 0">{{scope.row.deals}}</el-tag>
                <el-badge type="info" class="item" is-dot v-else></el-badge>
              </template>
            </el-table-column>
            <el-table-column label="调用" align="center" prop="tnums">
              <template slot-scope="scope">
                <el-tag type="warning" plain size="small" v-if="scope.row.tnums > 0">{{scope.row.tnums}}</el-tag>
                <el-badge type="info" class="item" is-dot v-else></el-badge>
              </template>
            </el-table-column>
            <el-table-column label="取证调用" align="center" prop="etnums">
              <template slot-scope="scope">
                <el-tag type="warning" plain size="small" v-if="scope.row.etnums > 0">{{scope.row.etnums}}</el-tag>
                <el-badge type="info" class="item" is-dot v-else></el-badge>
              </template>
            </el-table-column>
            <el-table-column label="归还" align="center" prop="rnums">
              <template slot-scope="scope">
                <el-tag type="success" plain size="small" v-if="scope.row.rnums > 0">{{scope.row.rnums}}</el-tag>
                <el-badge type="info" class="item" is-dot v-else></el-badge>
              </template>
            </el-table-column>
            <el-table-column label="库存" align="center" prop="nums">
              <template slot-scope="scope">
                <el-tag type="primary" plain size="small" v-if="scope.row.nums > 0">{{scope.row.nums}}</el-tag>
                <el-badge type="info" class="item" is-dot v-else></el-badge>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="8">
          <Echarts :option="option3" style="height: 350px;" />
        </el-col>
      </el-row>

    </el-card>
  </div>
</template>

<script>
  import {listInventory} from "@/api/wms/inventory";
  import {inventoryDatas} from "@/api/center/index"
  import {listStore,storeTreeselect} from "@/api/wms/store";
  import { listStoreArea} from '@/api/wms/storeArea';
  import {report} from '@/api/statistics'
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import Echarts from '../../dashboard/Echarts'

  const labelOption = {
    show: true,
    position: 'insideBottom',
    distance: 15,
    align: 'left',
    verticalAlign: 'middle',
    rotate: 90,
    formatter: '{c}  {name|{a}}',
    fontSize: 16,
    rich: {
      name: {}
    }
  };

  export default {
    name: "Inventory",
    dicts: ['sys_del_flag', 'wms_stock_status','wms_car_type','wms_put_task_area'],
    components: {
      Treeselect,
      Echarts
    },
    data() {
      return {
        xzTabVal: 0,
        xzTabs: [
          { label: '0', name: '刑事类', badge: undefined, xzType: 'xs', delFlag: '0', delivery: undefined },
          { label: '1', name: '行政类', badge: undefined, xzType: 'xz', delFlag: '0', delivery: '0' },
        ],
        // 按钮loading
        buttonLoading: false,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 库存表格数据
        inventoryList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 图片附件时间范围
        daterangeIntime: [],
        storeOptions: [],
        storeAreaOptions:[],
        storeTree: [],
        storeName: undefined,
        locatorOptions:[],
        statisticsOptions:[],
        defaultProps: {
          children: "children",
          label: "label"
        },
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 50,
          storeId: '',
          areaId: '',
          intime: undefined,
          lastTime: undefined,
          deptId: undefined,
          status: undefined,
          region:''
        },
        ano:undefined,
        drawer:false,
        activeName:0,
        srcList:[],
        areaDatas:[],
        storeReports:[],
        areaReports:[],
        regionReports:[],
        carTypeReports:[],
        xData:[],
        storeReportsDatas:{
          commons:[],
          cars:[],
          innums:[],
          outnums:[],
          deals:[],
          tnums:[],
          rnums:[],
          nums:[]
        },
        areaReportsDatas:{
          cl:[],
          dx:[],
          pt:[],
          gz:[],
          dz:[],
          zx:[],
          innums:[],
          outnums:[],
          deals:[],
          tnums:[],
          rnums:[],
          nums:[]
        },
        regionReportsDatas:{
          innums:[],
          outnums:[],
          deals:[],
          tnums:[],
          rnums:[],
          nums:[]
        },
        option:{
          color:['#91cc75','#ff6600', '#fc8452','#fac858','#3ba272','#0099ff', '#5470c6','#73c0de','#ea7ccc'],
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {},
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data: ['市直','三元','永安','泰宁','尤溪','大田','清流','明溪','沙县','将乐','宁化','建宁']
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: '综合仓',
                type: 'line',
                smooth: true,
                emphasis: {
                  focus: 'series'
                },
                data: [620, 732, 701, 734, 1090, 1130, 1120, 732, 701, 734, 1090, 1130]
              },
              {
                name: '车辆仓',
                type: 'line',
                smooth: true,
                emphasis: {
                  focus: 'series'
                },
                data: [120, 132, 101, 134, 90, 230, 210, 332, 301, 334, 390, 330]
              },
              {
                name: '入库',
                type: 'bar',
                emphasis: {
                  focus: 'series'
                },
                // markLine: {
                //   lineStyle: {
                //     type: 'dashed'
                //   },
                //   data: [[{ type: 'min' }, { type: 'max' }]]
                // },
                data: [320, 332, 301, 334, 390, 330, 320, 132, 101, 134, 90, 230]
              },
              {
                name: '调用',
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                  focus: 'series'
                },
                data: [150, 232, 201, 154, 190, 330, 410, 182, 191, 234, 290, 330]
              },
              {
                name: '取证调用',
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                  focus: 'series'
                },
                data: [150, 232, 201, 154, 190, 330, 410, 182, 191, 234, 290, 330]
              },
              {
                name: '归还',
                type: 'bar',
                stack: 'Ad',
                emphasis: {
                  focus: 'series'
                },
                data: [862, 1018, 964, 1026, 1679, 1600, 1570, 1018, 964, 1026, 1679, 1600]
              },
              {
                name: '出库',
                type: 'bar',
                barWidth: 3,
                emphasis: {
                  focus: 'series'
                },
                data: [120, 132, 101, 134, 90, 230, 210, 332, 301, 334, 390, 330]
              },
              {
                name: '取证出库',
                type: 'bar',
                barWidth: 3,
                emphasis: {
                  focus: 'series'
                },
                data: [120, 132, 101, 134, 90, 230, 210, 332, 301, 334, 390, 330]
              },
              {
                name: '处置',
                type: 'bar',
                barWidth: 3,
                emphasis: {
                  focus: 'series'
                },
                data: [220, 182, 191, 234, 290, 330, 310, 232, 201, 154, 190, 330]
              },
              {
                name: '库存',
                type: 'bar',
                barWidth: 5,
                emphasis: {
                  focus: 'series'
                },
                data: [620, 732, 701, 734, 1090, 1130, 1120, 732, 701, 734, 1090, 1130]
              }
            ]
        },
        option2 : {
          color:['#3ba272','#0099ff','#33ccff', '#6699ff', '#5470c6','#73c0de',
                 '#669933','#ff9933', '#ff6633','#69c2cc','#66cc99','#1c75ff'
          ],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // Use axis to trigger tooltip
              type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            }
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top:'25%',
            containLabel: true
          },
          yAxis: {
            type: 'value'
          },
          xAxis: {
            type: 'category',
            // data: ['车辆保管区', '大型物品区', '普通物品区', '贵重物品区', '电子设备区', '中型物品区'],
            data: ['市直','三元','永安','泰宁','尤溪','大田','清流','明溪','沙县','将乐','宁化','建宁']
          },
          series: [
            {
              name: '车辆保管区',
              type: 'line',
              smooth: true,
              emphasis: {
                focus: 'series'
              },
              data: [620, 732, 701, 734, 1090, 1130, 1120, 732, 701, 734, 1090, 1130]
            },
            {
              name: '大型物品区',
              type: 'line',
              smooth: true,
              emphasis: {
                focus: 'series'
              },
              data: [120, 132, 101, 134, 90, 230, 210, 332, 301, 334, 390, 330]
            },
            {
              name: '普通物品区',
              type: 'line',
              smooth: true,
              emphasis: {
                focus: 'series'
              },
              data: [620, 732, 701, 734, 1090, 1130, 1120, 732, 701, 734, 1090, 1130]
            },
            {
              name: '贵重物品区',
              type: 'line',
              smooth: true,
              emphasis: {
                focus: 'series'
              },
              data: [120, 132, 101, 134, 90, 230, 210, 332, 301, 334, 390, 330]
            },
            {
              name: '电子设备区',
              type: 'line',
              smooth: true,
              emphasis: {
                focus: 'series'
              },
              data: [620, 732, 701, 734, 1090, 1130, 1120, 732, 701, 734, 1090, 1130]
            },
            {
              name: '中型物品区',
              type: 'line',
              smooth: true,
              emphasis: {
                focus: 'series'
              },
              data: [120, 132, 101, 134, 90, 230, 210, 332, 301, 334, 390, 330]
            },
            {
              name: '入库',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [320, 302, 301, 334, 390, 330]
            },
            {
              name: '出库',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [120, 132, 101, 134, 90, 230]
            },
            {
              name: '取证出库',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [120, 132, 101, 134, 90, 230]
            },
            {
              name: '处置',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [220, 182, 191, 234, 290, 330]
            },
            {
              name: '调用',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [150, 212, 201, 154, 190, 330]
            },
            {
              name: '取证调用',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [150, 212, 201, 154, 190, 330]
            },
            {
              name: '归还',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [820, 832, 901, 934, 1290, 1330]
            },
            {
              name: '库存',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [220, 182, 191, 234, 290, 330]
            }
          ]
        },
        option3 : {
          color:['#73c0de','#91cc75', '#fac858', '#ee6666', '#5470c6', '#1c75ff','#3ba272', '#fc8452', '#ea7ccc'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // Use axis to trigger tooltip
              type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            }
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'category',
            data: ['市直','三元','永安','泰宁','尤溪','大田','清流','明溪','沙县','将乐','宁化','建宁']
          },
          series: [
            {
              name: '入库',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [320, 302, 301, 334, 390, 330, 320]
            },
            {
              name: '出库',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: '取证出库',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: '处置',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
              name: '调用',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [150, 212, 201, 154, 190, 330, 410]
            },
            {
              name: '取证调用',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [150, 212, 201, 154, 190, 330, 410]
            },
            {
              name: '归还',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [820, 832, 901, 934, 1290, 1330, 1320]
            },
            {
              name: '库存',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [820, 832, 901, 934, 1290, 1330, 1320]
            }
          ]
        }
      }
    },
    watch: {
      'queryParams.storeId': {
        handler(newVal, oldVal) {
          this.getStoreArea(newVal);
        },
        deep: true,
        immediate: true
      },
      'queryParams.areaId':{
        handler(newVal){
          if(newVal){
            this.storeAreaOptions.forEach(item=>{
               if(item.id == newVal){
                 let ano = item.ano;
                 this.ano = ano;
               }
            })
          }
        },
        deep: true,
        immediate: true
      },
    },
    created() {
      this.getList();
      this.getStoreTreeselect();
    },
    methods: {
      /** 查询库存列表 */
      getList() {
        this.loading = true;
        this.queryParams.params = {};
        if (null != this.daterangeIntime && '' != this.daterangeIntime) {
          this.queryParams.params["beginIntime"] = this.daterangeIntime[0];
          this.queryParams.params["endIntime"] = this.daterangeIntime[1];
        }
        this.queryParams.xzType = this.xzTabVal;
        report(this.queryParams).then(response => {
          this.storeReports = response.stores;
          this.areaReports = response.areas;
          this.regionReports = response.regions;
          this.carTypeReports = response.carTypeResult;
          this.option.xAxis[0].data = response.xData;
          this.option.series[0].data = response.storeResult.alls;
          this.option.series[1].data = response.storeResult.cars;
          this.option.series[2].data = response.storeResult.innums;
          this.option.series[3].data = response.storeResult.tnums;
          this.option.series[4].data = response.storeResult.etnums;
          this.option.series[5].data = response.storeResult.rnums;
          this.option.series[6].data = response.storeResult.outnums;
          this.option.series[7].data = response.storeResult.eoutnums;
          this.option.series[8].data = response.storeResult.deals;
          this.option.series[9].data = response.storeResult.nums;

          this.option2.xAxis.data = response.xData;
          this.option2.series[0].data = response.areaResult.clnums;
          this.option2.series[1].data = response.areaResult.dxnums;
          this.option2.series[2].data = response.areaResult.ptnums;
          this.option2.series[3].data = response.areaResult.gznums;
          this.option2.series[4].data = response.areaResult.dznums;
          this.option2.series[5].data = response.areaResult.zxnums;
          this.option2.series[6].data = response.areaResult.innums;
          this.option2.series[7].data = response.areaResult.outnums;
          this.option2.series[8].data = response.areaResult.eoutnums;
          this.option2.series[9].data = response.areaResult.deals;
          this.option2.series[10].data = response.areaResult.tnums;
          this.option2.series[11].data = response.areaResult.etnums;
          this.option2.series[12].data = response.areaResult.rnums;
          this.option2.series[13].data = response.areaResult.nums;

          this.option3.yAxis.data = response.xData;
          this.option3.series[0].data = response.regionResult.innums;
          this.option3.series[1].data = response.regionResult.outnums;
          this.option3.series[2].data = response.regionResult.eoutnums;
          this.option3.series[3].data = response.regionResult.deals;
          this.option3.series[4].data = response.regionResult.tnums;
          this.option3.series[5].data = response.regionResult.etnums;
          this.option3.series[6].data = response.regionResult.rnums;
          this.option3.series[7].data = response.regionResult.nums;
          this.loading = false;
        });
      },
      xzTabChange(e){
        this.getList()
      },
      radioChange(e){
        this.tabs.forEach(item=>{
            if(item.label == e){
              this.queryParams.region = item.value;
            }
        })
        this.getList();
      },
      statisticsChange(item){
        this.queryParams.region = item.region;
        this.getList();
      },

      /** 查询分类下拉树结构 */
      getStoreTreeselect() {
        storeTreeselect().then(response => {
          this.storeOptions = response.data;
        });
      },
      /** 查询库区*/
      getStoreArea(storeId){
        listStoreArea({storeId:storeId}).then(response=>{
          this.storeAreaOptions = response.rows;
          let areaDatas = [];
          this.storeAreaOptions.forEach(item => {
            areaDatas.push(item.name);
          })
        })
      },
      //table统计
       getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          if (index === 1) {
            sums[index] = '';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              // console.info('value===>',value)
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            // sums[index] += ' 元';
          } else {
            // sums[index] = 'N/A';
          }
        });

        return sums;
      },
      getSummaries1(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          if (index === 1) {
            sums[index] = '';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              // console.info('value===>',value)
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            // sums[index] += ' 元';
          } else {
            // sums[index] = 'N/A';
          }
        });

        return sums;
      },
      getSummaries2(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              // console.info('value===>',value)
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            // sums[index] += ' 元';
          } else {
            // sums[index] = 'N/A';
          }
        });

        return sums;
      },
      getSummaries3(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          if (index === 1) {
            sums[index] = '';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              // console.info('value===>',value)
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            // sums[index] += ' 元';
          } else {
            // sums[index] = 'N/A';
          }
        });

        return sums;
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.daterangeIntime = [];
        this.daterangeLastTime = [];
        this.daterangeNextTime = [];
        this.daterangeCreateTime = [];
        this.daterangeUpdateTime = [];
        this.queryParams.region = "";
        this.queryParams.storeId = "";
        this.queryParams.areaId = "";
        this.resetForm("queryForm");
        this.handleQuery();
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('wms/inventory/export', {
          ...this.queryParams
        }, `inventory_${new Date().getTime()}.xlsx`)
      },
    }
  };
</script>
